<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8"/>
  <title> New Document </title>
 <style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		width:500px;
		height:500px;
		/* background:#888888; */
	}
	ul{
		width:200px;
		height:200px;
		margin:100px auto;
		background:#888888;
		position:relative;
	}
	li{
		width:200px;
		height:200px;
		list-style:none;
		position:absolute;
		top:0;
		left:0;
	}
	button{
		position:absolute;
		left:50px;
		top:50px;
	}
	#ul{transform-origin:100px 100px -100px;transform-style:preserve-3d;transform:scale(0.7) rotateX(-45.5deg) rotateY(-45deg);}
	#Li1{transform:translate(0,0) rotate(0,0);background:red;}/* 前面 */
	#Li2{transform-origin:right;transform:translateX(-200px) rotateY(-90deg);background:orange;}/* 左侧 */
	#Li3{transform-origin:left;transform:translateX(200px) rotateY(90deg);background:yellow ;}/* 右侧 */
	#Li4{transform-origin:bottom;transform:translateY(-200px) rotateX(90deg);background:green ;}/* 上面 */
	#Li5{transform-origin:top;transform:translateY(200px) rotateX(-90deg);background:blue;}/* 下面 */
	#Li6{transform-origin:left;transform:translateX(200px) translateZ(-200px) rotateY(180deg);background:violet;}/* 后面 */
 </style>
 </head>

 <body>
  <ul id="ul">
  	<li id="Li1"></li>
  	<li id="Li2"></li>
  	<li id="Li3"></li>
  	<li id="Li4"></li>
  	<li id="Li5"></li>
  	<li id="Li6"></li>
  </ul>
  <button id="button">旋转</button>
  <script type="text/javascript">
	window.onload=function(){
		console.log(1);
		function $(id){
			return document.getElementById(id);
		}
		$('button').onclick=function(){
			alert(0);
		}
	}
  </script>
 </body>
</html>
